<template>
    <view class="page-wrap">
        <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
            <view class="list-item info" v-for="(info, index) in list" :key="index" @click="toDetail(info.id)">
                <image class="cover" :src="info.cover"></image>
                <view class="right">
                    <view class="title text-cut">{{info.title}}</view>
                    <view class="intro text-cut-2">{{info.intro}}</view>
                    <view class="price">
                        <text class="original">￥{{info.originalPrice}}</text>
                        <text class="sell">￥{{info.sellPrice}}</text>
                    </view>
                </view>
            </view>
        </scroll-list>
        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data() {
            return {
                list: [],
                option: {
                    size: 15, // 分页大小
                    auto: true // 自动加载列表
                },
            };
        },
        methods: {
            // 加载数据
            load(paging) {
                this.$api.voucher.page({
                    ...paging,
                }).then(res => {
                    console.log('notice', res)
                    this.list = this.list.concat(res.list);
                    // 加载成功
                    this.$refs.list.loadSuccess({
                        list: this.list,
                        total: res.total
                    });
                })
            },
            // 刷新刷剧
            refresh(paging) {
                this.$api.voucher.page({
                    ...paging,
                }).then(res => {
                    console.log('notice', res)
                    this.list = res.list;
                    // 加载成功
                    this.$refs.list.refreshSuccess({
                        list: this.list,
                        total: res.total
                    });
                })
            },
            toDetail(id) {
                this.$toPage({
                    url: '/pages/voucher/detail?id=' + id
                });
            },
        },
        watch: {},
        onLoad(option) {},
        onShow() {},
        onHide() {},
        onUnload() {},
        onReachBottom() {},
        onPageScroll(event) {},
        onPullDownRefresh() {},
        onShareAppMessage(options) {}
    };
</script>

<style scoped lang="scss">
    $ico-color: #666;

    .page-wrap {
        background: #fff;
        padding: 0 32rpx;

        .info {
            display: flex;
            margin-top: 32rpx;
            padding-bottom: 32rpx;
            border-bottom: solid 1rpx #eee;

            &+.info {
            }

            .cover {
                width: 200rpx;
                height: 128rpx;
                margin-right: 32rpx;
            }

            .right {
                flex: 1;
                min-width: 0;

                .title {
                    color: #333;
                    font-size: 32rpx;
                    font-weight: bold;
                }

                .intro {
                    color: #808080;
                    font-size: 20rpx;
                }

                .price {
                    color: #f44336;
                    text-align: right;

                    .original {
                        font-size: 24rpx;
                        text-decoration: line-through;
                    }

                    .sell {
                        font-size: 32rpx;
                    }
                }
            }
        }
    }
</style>